<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http_equiv="X_UA_Compatible" content="ie=edge">
    <title>组织结构树-组件</title>
    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../assets/css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="../assets/fontscrm/iconfont.css">
    <link rel="stylesheet" href="../assets/css/channel_reset.css">
    <link rel="stylesheet" href="../assets/dialog/htf_channel_dialog.css">
    <link rel="stylesheet" href="组织结构树.css">
</head>

<body>
    <div class="main_con">
        <div class="content">
            <div class="content_inner pt10">
                <div class="title_box flexCenter">
                    <ul class="period highlight_red ml0">
                        <li class="active" data-selectid="10"><a href="javascript:;">今年以来</a></li>
                        <li data-selectid="20"><a href="javascript:;">历史</a></li>
                    </ul>
                </div>
                <div class="table_outer no_records_found_height form_msg" style="position: relative">
                    <div class="list_table tree_map" id="tree_map" style="display:none">
                        <div class="svgcontainer" id="svgcontainer"></div>
                        <div class="flexAround">
                            <div class="tree_assembly tree_top">
                                <p class="ellipsis_p">平安集团</p>
                            </div>
                        </div>
                        <!-- 联系人 -->
                        <div class="flexAround">
                            <div class="tree_assembly tree_human tree_edit_item hide_edit">
                                <div class="tree_human_bg">
                                    <p class="tree_human_img"><!-- <img id="aaa" src="D:/AAAWork/assets/images/human.jpg"> --></p>
                                    <p class="tree_human_msg"><span class="tree_human_position">董事长</span><span class="tree_human_name">张三</span></p>
                                    <p class="tree_item_edit"><i class="icon iconguanbi1"></i><i class="icon_split_line"></i><i class="icon iconshanchu1"></i></p>
                                    <p class="tree_human_visitnum">9</p>
                                </div>
                                <div class="tree_human_bg overflow_hidden">
                                    <p class="tree_human_bottomborder bg_purple"></p>
                                </div>
                            </div>
                        </div>
                        <!-- 子机构 -->
                        <div class="flexAround">
                            <div class="tree_assembly tree_sub">
                                <div class="tree_sub_top tree_edit_item hide_edit">
                                    <p class="ellipsis_p tree_sub_name">平安证券</p>
                                    <p class="tree_item_edit"><i class="icon iconguanbi1 tree_item_edit_add"></i><i class="icon_split_line"></i><i class="icon iconshanchu1"></i></p>
                                    <p class="tree_triangle"></p>
                                    <div class="tree_sub_edit_modal">
                                        <p class="tree_triangle"></p>
                                        <p class="tree_add_man split">新增人物</p>
                                        <p class="tree_add_department">新增部门</p>
                                    </div>
                                </div>
                                <div class="tree_sub_msg">
                                    <p class="tree_sub_msg_title">
                                        <span>规模：</span>
                                        <span>2345亿</span>
                                        <i class="icon iconzhankaishouqi2 tree_sub_msg_show_detail"></i>
                                    </p>
                                    <div class="tree_sub_msg_detail">
                                        <ul>
                                            <li>
                                                <p>
                                                    <span class="tree_dot"></span>
                                                    <span class="tree_label">较上季度变化:</span>
                                                </p>
                                                <p class="color_red">
                                                    <span class="tree_value">45亿</span>
                                                    <i class="icon iconshangjiantou2"></i>
                                                </p>
                                            </li>
                                            <li>
                                                <p>
                                                    <span class="tree_dot"></span>
                                                    <span class="tree_label">较年初变化:</span>
                                                </p>
                                                <p class="color_red">
                                                    <span class="tree_value">115亿</span>
                                                    <i class="icon iconshangjiantou2"></i>
                                                </p>
                                            </li>
                                            <li>
                                                <p>
                                                    <span class="tree_dot"></span>
                                                    <span class="tree_label">较上月变化:</span>
                                                </p>
                                                <p class="color_green">
                                                    <span class="tree_value">5亿</span>
                                                    <i class="icon iconxiajiantou2"></i>
                                                </p>
                                            </li>
                                            <li>
                                                <p>
                                                    <span class="tree_dot"></span>
                                                    <span class="tree_label">公募:</span>
                                                </p>
                                                <p class="color_green">
                                                    <span class="tree_value">245亿</span>
                                                    <i class="icon iconxiajiantou2"></i>
                                                </p>
                                            </li>
                                            <li>
                                                <p>
                                                    <span class="tree_dot"></span>
                                                    <span class="tree_label">专户:</span>
                                                </p>
                                                <p class="color_red">
                                                    <span class="tree_value">23455亿</span>
                                                    <i class="icon iconshangjiantou2"></i>
                                                </p>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                        <!-- 图例legend -->
                        <div class="flexEnd">
                            <div class="tree_legend">
                                <div class="tree_legend_text flexBetween">
                                    <span>最小</span>
                                    <span>最大</span>
                                </div>
                                <ul class="flexStart">
                                    <li class="bg_red"></li>
                                    <li class="bg_orange"></li>
                                    <li class="bg_yellow"></li>
                                    <li class="bg_blue"></li>
                                    <li class="bg_purple"></li>
                                </ul>
                                <div class="tree_legend_text flexCenter">
                                    <span>拜访次数</span>
                                </div>
                            </div>
                        </div>
                        <!-- 工具tools -->
                        <div class="tree_tools">
                            <ul>
                                <li id="tree_enlarge">
                                    <p><i class="icon iconguanbi1"></i></p>
                                    <p>放大</p>
                                </li>
                                <li id="tree_narrow">
                                    <p><i class="icon iconguanbi1"></i></p>
                                    <p>缩小</p>
                                </li>
                                <li id="tree_fullScreen">
                                    <p><i class="icon iconguanbi1"></i></p>
                                    <p>全屏</p>
                                </li>
                                <li id="tree_edit">
                                    <p><i class="icon iconfenxiang"></i></p>
                                    <p>编辑</p>
                                </li>
                                <li id="tree_save">
                                    <p><i class="icon iconxiazai"></i></p>
                                    <p>保存</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="table_loading" style="height: 360px;padding: 50px;">
                        <span class="page_change_loading_wrap"><span class="page_change_loading_text"></span><span
                                class="animation_wrap"><span class="page_change_dot"></span></span></span>
                    </div>
                    <div class="noData_box" style="display: none;">
                        <i class="icon iconwushuju"></i>
                        <p>暂无数据</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 圆点转圈loading -->
    <div class="modal fade" id="loadModel" data-backdrop="static" style="background:rgba(255,255,255,0);">
        <div class="modal-dialog">
            <div class="load4">
                <div class="loader"></div>
            </div>
        </div>
    </div>
    <!-- 拜访次数提示框 -->
    <div class="fixed_bg" id="visitNumModal" style="display: none;">
        <div class="fixed_modal visitNumModal">
            <p><span>今年以来:</span><span>12次</span></p>
            <p><span>本季度:</span><span>6次</span></p>
        </div>
    </div>
    <script src="../assets/js/jquery_3.4.1.min.js"></script>
    <script src="../assets/bootstrap/js/bootstrap.js"></script>
    <script src="../assets/js/bootstrap-datetimepicker.js"></script>
    <script src="../assets/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../assets/dialog/htf_channel_dialog.js"></script>
    <script src="../assets/fontscrm/iconfont.js"></script>
    <!-- 公共方法 -->
    <script src="../assets/js/CommonUtil.js"></script>
    <script src="../assets/js/echarts.min.js"></script>
    <script src="../assets/js/rem.js"></script>
    <!-- 导出图片 -->
    <script src="../assets/js/html2canvas.js"></script>
    <script src="../assets/js/jspdf.debug.js"></script>
    <!-- 数据 -->
    <script src="data1.json"></script>
    <script src="./组织结构树.js"></script>
</body>

</html>